import { View, Image, Text } from "@tarojs/components";
import './index.scss';
import Taro from "@tarojs/taro";

function PetCard({ petList }: PetListProps) {
  
  const handleSelctedPet = (id: number) => {
    Taro.navigateTo({
      url: `/petProfile/pages/detail/index?id=${id}`
    })
  }
  const handleAddPet = () => {
    Taro.navigateTo({
      url: '/petProfile/pages/edit/index'
    })
  }
  
  const renderPetList = petList.map((item, index) => {
    return (
      <View className="pet-card" key={index} onClick={() => handleSelctedPet(item.id)}>
        <Image className="pet-avatar" src={item.petAvatarIcon} webp mode="aspectFill" />
        <Text className="pet-name">{item.petName}</Text>
        <Text className="pet-age">{item.petAge}岁</Text>
      </View>
    )
  })
  return (
    <View className="pet-cards">
      {renderPetList}
      <View className="pet-card add-pet" onClick={handleAddPet}>
        <View className="add-icon">+</View>
        <Text className="add-text">添加宠物</Text>
      </View>
    </View>
  )
}

export default PetCard;